<template>
  <div
    class="slideShowCon"
    :style="`--item-sum:${list.length};--slide-width:${itemWidth}rem`"
  >
    <!-- 左右翻页按钮 -->
    <i
      class="fa fa-arrow-left"
      aria-hidden="true"
      @click="pre"
      v-show="activeIndex != 0"
    ></i>
    <i
      class="fa fa-arrow-right"
      aria-hidden="true"
      @click="next"
      v-show="activeIndex != list.length - 1"
    ></i>
    <!-- 下方的白色条 -->
    <div class="markCon">
      <div
        class="border"
        v-for="(item, index) in list"
        :key="index"
        :style="{ background: index == activeIndex ? '#fff' : '' }"
        @click="goIndex(index)"
      ></div>
    </div>
    <!-- 轮播图展示内容 -->
    <!-- 外从容器,overflow:hidden -->
    <div class="slideShow">
      <!-- 容器滚动 -->
      <div
        class="con"
        :style="`transform:translateX(${-activeIndex * itemWidth}rem)`"
      >
        <!-- 内容单项 -->
        <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
          :style="{ background: item.color }"
        >
          {{ item.des }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  setup() {
    //轮播图item的css宽度,单位rem
    const itemWidth = ref(20);
    //当前活动
    const activeIndex = ref(0);

    //自动轮播定时器
    let timer: any = null;
    //数据
    const list = ref([
      { color: "#1abc9c", des: "1" },
      { color: "#27ae60", des: "2" },
      { color: "#2980b9", des: "3" },
      { color: "#e74c3c", des: "4" },
      { color: "#8e44ad", des: "5" },
    ]);
    function pre() {
      clearInterval(timer);
      if (activeIndex.value > 0) {
        activeIndex.value -= 1;
      }
    }
    function next() {
      clearInterval(timer);
      if (activeIndex.value < list.value.length) {
        activeIndex.value += 1;
      }
    }
    function goIndex(index: number) {
      clearInterval(timer);
      activeIndex.value = index;
    }
    function xunhuan() {
      timer = setInterval(() => {
        if (activeIndex.value < list.value.length - 1) {
          activeIndex.value += 1;
        } else {
          activeIndex.value = 0;
        }
      }, 2000);
    }
    onMounted(() => {
      xunhuan();
    });

    return { itemWidth, list, activeIndex, pre, next, goIndex };
  },
});
</script>
<style lang="scss" scoped>
.slideShowCon {
  // --slide-width
  // --item-sum
  --slide-height: 10rem;
  position: relative;
  .fa {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .fa-arrow-left {
    left: -2rem;
  }
  .fa-arrow-right {
    right: -2rem;
  }
  //下方的小白条
  .markCon {
    position: absolute;
    z-index: 999;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    .border {
      width: 1rem;
      height: 0.2rem;
      background: #bdc3c7;
      border-radius: 4px;
      margin-right: 0.2rem;
      cursor: pointer;
      transition: 0.3s;
    }
    .border:nth-last-of-type(1) {
      margin-right: 0;
    }
  }
  //轮播图遮蔽
  .slideShow {
    width: var(--slide-width);
    height: var(--slide-height);
    overflow: hidden;
    //内容显示区
    .con {
      display: flex;
      flex-wrap: nowrap;
      transition: 0.3s;
      //内容
      .item {
        flex-shrink: 0;
        width: var(--slide-width);
        height: var(--slide-height);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        font-weight: 900;
      }
    }
  }
}
</style>
